<template>
	<!-- 优惠券 -->
	<div class="component-item" v-if="couponList.length > 0">
		<div class="coupon-box"
			 :style="{'background': item.bgColor, 'border-radius': item.bgStyle == 'circle' ? '10px' : '0px', 'margin': '0px ' + item.bgMargin + 'px', 'margin-top': item.pageMargin + 'px'}">
			<scroll-view scroll-x="true" scroll-left="120" class="coupon-scroll-box">
				<view style="display: flex;">
					<div class="coupon-item" v-for="item2 in couponList" :key="item2.id" :class="{'gray': item2.received == 1}">
						<div class="left">
							<div class="num">
								<div v-if="item2.type == 1"><span>￥</span> {{ item2.amount }}</div>
								<div v-else>{{ item2.discount * 100 }}折</div>
							</div>
							<div class="txt">{{ item2.name }}</div>
						</div>
						<div class="right" @click="receiveCoupon(item2)" v-if="item2.received == 0">立即领取</div>
						<div class="right" v-else>已领取</div>
						<div class="roll up-roll" :style="{'background': item.bgColor}"></div>
						<div class="roll down-roll" :style="{'background': item.bgColor}"></div>
					</div>
				</view>
			</scroll-view>
		</div>
	</div>
</template>

<script>
	export default {
		name: "cTitle",
		props: {
			item: {
				type: Object,
				default() {
					return {}
				}
			}
		},
		data() {
			return {
				couponList: []
			}
		},
		mounted() {
			this.getCouponList()
		},
		methods: {
			// 获取可领取的优惠券
			async getCouponList() {
				let res = await this.$api.coupon.couponList.get({goods_id: 0})
				this.couponList = res.data
			},
			// 领取优惠券
			async receiveCoupon(row) {
				let res = await this.$api.coupon.receive.post({id: row.id})
				if (res.code == 0) {
					this.$tool.msg(res.msg)
					this.getCouponList()
				} else {
					this.$tool.msg(res.msg, 3000, false, 'error')
				}
			},
		}
	}
</script>

<style scoped>
.coupon-box {
    width: calc(100% - 40rpx);
    display: flex;
    align-items: center;
    padding: 15px 0 15px 10px;
    overflow: hidden;
}
.coupon-box .coupon-item {
    flex-shrink: 0;
    position: relative;
    display: flex;
    width: 152px;
    height: 76px;
    background: #e93323;
    color: #fff;
    border-radius: 5px;
    margin-right: 10px;
}
.coupon-item .left {
    width: 120px;
    height: 76px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.coupon-item .right {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 12px;
    border-left: 1px dashed #fff;
    writing-mode: vertical-lr;
    letter-spacing: 3px;
}
.coupon-item .left .num {
    font-size: 24px;
    font-weight: 700;
}
.coupon-item .left .txt {
    font-size: 12px;
}
.coupon-item .roll {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.up-roll {
    right: 26px;
    top: -5px;
}
.down-roll {
    right: 26px;
    bottom: -5px;
}
.coupon-item.gray {
    background: #d8d8d8;
}
.coupon-scroll-box .uni-scroll-view-content {
	display: flex;
}	
</style>